<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle :title="title"
               :is_name="true"
               :is_back="true"
               :is_lang="false"
               :is_kf="false"
      ></gltitle>
    </template>
    <template #content>


      <div class="container">
        <div class="box">
          <div class="itemBox">
            <ul>
              <li v-if="isMobile">
                <div class="n">{{ $t('page.doc77') }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input disabled type="text" :placeholder="$t('page.doc58')" v-model="phone">
                  </div>
                  <!-- <div class="set_area" @click="getArea"> -->
                  <div class="set_area">
                    +{{ areaId }} <img src="../../assets/images/ico_la.png" alt="">
                  </div>
                </div>
              </li>

              <li v-else>
                <div class="n">{{ $t('page3.doc5') }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input type="text" :placeholder="$t('page.doc46')" v-model="phone" readonly>
                  </div>
                </div>
              </li>

            </ul>
          </div>
          <div class="itemBox">
            <ul>
              <li>
                <div class="n" v-if="isMobile">{{ $t('page.doc78') }}</div>
                <div class="n" v-else>{{ $t('page.doc78') }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input type="text" :placeholder="$t('page.doc36')" v-model="code" v-if="isMobile">
                    <input type="text" :placeholder="$t('page.doc36')" v-model="code" v-else>
                  </div>
                  <div class="b" v-if="!time_show">
                    <button class="btn on" @click="send_click()">{{ $t('page.doc37') }}</button>
                  </div>
                  <div class="b" v-show="time_show">
                    <button>
                      <van-count-down ref="countDown" :time="time" format="ss" @finish='finish_time'>
                        <template v-slot="timeData">
                          <span>{{ timeData.seconds }} <var>s</var></span>
                        </template>
                      </van-count-down>
                    </button>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="itemBox">
            <ul>
              <li>
                <div class="n">{{ $t('title.doc31') }}</div>
                <div class="val flex rel">
                  <div class="flex1">
                    <input :type="registration_data.pwdType" :placeholder="$t('page.doc79')" v-model="password"
                           @input="onInput" maxlength="6">
                  </div>
                  <div class="str abs">
                    　<img :src="registration_data.src" @click="changeType()"/>
                  </div>
                </div>
                <div class="val flex rel">
                  <div class="flex1">
                    <input :type="registration_data.pwdType"
                           :placeholder="$t('page.doc80')" v-model="s_password" @input="onInput" maxlength="6">
                  </div>
                  <div class="str abs">
                    　<img :src="registration_data.src" @click="changeType()"/>
                  </div>
                </div>
                <div class="txt c-red">{{ pwTxt }}</div>
              </li>
            </ul>
          </div>
          <ul>
            <li>
              <div class="mflex items-center">
                <img style="width: 20px;margin-right: 8px;" src="@/assets/images/wating.png" alt="">
                <div class="name" style="color: #37F0CD;">{{ $t('page.doc81') }}</div>
              </div>
              <div class="doc" v-html="$t('page.doc82')">
                1.您的资金密码是用来交易，提现和账户安全设置，建议不与登录密码一致，由此产生的账户被盗，本站概不负责。
                <br><br>
                2.修改资金密码之后，24小时之内不能提现
              </div>
            </li>

          </ul>

          <div class="bot">
            <button class="btn" @click="onBtn()">{{ $t('page.doc83') }}</button>
          </div>
        </div>
      </div>


      <van-popup v-model="if_area" position="bottom" round>
        <div class="area_pop">
          <div class="title rel">
            {{ $t('page.doc41') }}
            <div class="abs" @click="if_area = false">
              <van-icon name="cross"/>
            </div>
          </div>
          <div class="so db">
            <div class="ico"></div>
            <div class="flexs">
              <input
                type="text"
                :placeholder="$t('page.doc42')"
                v-model="soAreaId"
              />
            </div>
            <div class="closes" v-if="soAreaId != ''" @click="soAreaId = ''">
              <img src="../../assets/images/ico_close.png" alt=""/>
            </div>
          </div>
          <ul>
            <li class="db" v-for="(item,k) in areaData" :key="k" @click="area_set(item.mobilePrefix)">
              <div class="ico"><img :src="item.iconUrl" alt=""></div>
              <div class="flex txt">
                {{ item.name }}（+{{ item.mobilePrefix }}）
              </div>
            </li>
          </ul>
        </div>
      </van-popup>


    </template>
  </page-scroll>
</template>
<script>
import {mapActions, mapMutations, mapGetters} from "vuex";

const phoneReg = /^1[3-578]\d{9}$/;  //大陆手机验证
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
const mailReg = /^(\w-*\.*\+*)+@(\w-?)+(\.\w{2,})+$/;  //邮箱验证


export default {

  data() {
    return {
      title: this.$t('title.doc31'),
      str: true,

      phone: this.$store.state.userData.email,
      password: '',
      s_password: '',
      code: '',
      time: 60 * 1000,
      time_show: false,
      time_status: false,
      registration_data: {
        pwdType: "password",
        src: require("../../assets/images/yj1.png")
      },
      areaData: [],
      if_area: false,
      areaId: this.$store.state.areaId,
      pwTxt: '',

      isMobile: false,
      cid: 1,
      soAreaId: ''
    };
  },

  mounted() {
    // if(!this.$store.state.userData.hasBindEmail){
    //   this.$toast(this.$t('page.doc301'))
    //   let url = '/my/bind_email'
    //   this.$router.replace({
    //     path:url,
    //     query:{
    //     }
    //   });
    // }
    // if(mailReg.test(this.phone)){
    //   this.isMobile = false
    //   this.cid = 1
    // }else{
    //   this.isMobile = true
    //   this.cid = 0
    // }
  },
  methods: {
    ...mapMutations([
      "SET_USERDATA",
    ]),
    ...mapActions(["Get_userData"]),

    onInput() {
      let regWp = new RegExp(/^\d{6}$/);
      if (this.password) {
        if (!regWp.test(this.password)) {
          this.pwTxt = this.$t('page.doc84')
        } else {
          this.pwTxt = ''
        }
      }
      if (this.s_password) {
        if (!regWp.test(this.s_password)) {
          this.pwTxt = this.$t('page.doc84')
        } else if (this.s_password !== this.password) {
          this.pwTxt = this.$t('page.doc49')
        } else {
          this.pwTxt = ''
        }
      }
    },
    onBtn() {

      let regWp = new RegExp(/^\d{6}$/);
      if (this.phone == '') {
        // this.$toast(this.$t('page.doc85'))
        // return
      } else if (this.areaId == '') {
        // this.$toast(this.$t('page.doc86'))
        // return
      } else if (this.code == '') {
        this.$toast(this.$t('page.doc87'))
        return
      } else if (this.password == '') {
        this.$toast(this.$t('page.doc88'))
        return
      } else if (this.password) {
        if (!regWp.test(this.password)) {
          this.$toast(this.$t('page.doc84'))
          return
        } else if (this.s_password !== this.password) {
          this.$toast(this.$t('page.doc49'))
          return
        }
      } else if (this.s_password) {
        if (!regWp.test(this.s_password)) {
          this.$toast(this.$t('page.doc84'))
          return
        } else if (this.s_password !== this.password) {
          this.$toast(this.$t('page.doc49'))
          return
        }
      }

      this.$post(this.URL.user.jymm, {
        accountType: this.cid, //送验证码的账号类型(0-手机 / 1-邮箱)
        prefix: this.areaId, //手机号码前缀 (accountType=0 时必填)
        account: this.phone, //手机号/邮箱
        code: this.code, //验证码 (验证码类型: 3)
        password: this.$md5(this.password),
        verifyType: 0
      }).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.Get_userData()
          this.$router.go('-1')
        } else {
          this.$toast(res.message);
        }
      });
    },
    changeType() {
      this.registration_data.pwdType = this.registration_data.pwdType === 'password' ? 'text' : 'password';
      this.registration_data.src = this.registration_data.src == require("../../assets/images/yj2.png") ? require("../../assets/images/yj1.png") : require("../../assets/images/yj2.png");
    },
    finish_time() {
      this.time_status = false
      this.time_show = false
    },
    send_click() {
      if (this.time_status) {
        this.$toast.success(this.$t('page.doc44'));
        return;
      }
      // if (this.phone.toString().length < 7 || this.phone.toString().length > 12) {
      //   this.$toast.fail(this.$t('new.doc8'));
      //   return;
      // }
      this.send_code();
    },

    send_code() {
      //判断在不在60秒内
      if (this.time_status) {
        //this.$toast("操作频繁.晚点再试");
        this.$toast.success(this.$t('page.doc44'));
      } else {
        // if (this.phone.toString().length > 6 && this.phone.toString().length < 13) {
        //   var send_api = this.URL.user.code_send;
        //   var send_arr = {
        //     accountType:this.cid,
        //     prefix:this.areaId,
        //     account: this.phone,
        //     type: 3,
        //     captchaKey:this.captchaKey,
        //     captchaCode:this.cap
        //   };
        // } else {
        //   //this.$toast("请输入正确的手机号");
        //   this.$toast.fail(this.$t('new.doc8'));
        //   return;
        // }
        if (this.cid == 0) {
          if (this.phone.toString().length < 6 && this.phone.toString().length < 13) {
            //this.$toast("请输入正确的手机号");
            this.$toast.fail(this.$t('page.doc45'));
            return;
          }
        } else {
          if (!mailReg.test(this.phone)) {
            //this.$toast(this.$t('page.doc46'));
            this.$toast.fail(this.$t('page.doc46'));
            return
          }
        }
        var send_api = this.URL.user.code_send;
        var send_arr = {
          accountType: this.cid,
          prefix: this.areaId,
          account: this.phone,
          type: 3,
          captchaKey: this.captchaKey,
          captchaCode: this.cap
        };


        this.$post(send_api, send_arr).then((res) => {
          if (res.code == 0) {
            this.$toast.success(this.$t('new.doc7'));
            // this.code = res.data.code
            this.time_show = true
            this.time_status = true
            this.$refs.countDown.reset();
            this.$refs.countDown.start();
          } else {
            this.$toast(res.message)
          }
        });
      }
    },

    area_set(id) {
      this.areaId = id
      this.if_area = false
    },
    getArea() {
      this.if_area = true
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>


<style lang="less" scoped>
/deep/ .head {
  background: transparent !important;
  height: 1.4rem;
  display: flex;
  align-items: center;
}

/deep/ .container {
  padding: 0 0.3rem;
}
.page {
  background: #0d2623 url("../../assets/images/main-bg.png") no-repeat scroll;
  background-size: 100% 100vh;
  min-height: 100vh;
  padding-bottom: 60px;
}

.itemBox {
  margin-bottom: 20px;
  background: transparent;
  padding: 0;
}

.btn {
  border-radius: .16rem;
}

.box {
  padding-top: .3rem;

  ul {
    li {
      .flex1, .set_area {
        height: 100%;
        border-radius: .16rem;
        padding: 0 .3rem;
        line-height: .8rem;

        img {
          height: .1rem;
        }
      }

      p {
        margin-top: .16rem;
        font-size: .26rem;
        font-weight: 500;
        color: #cda349;
      }

      .val {
        margin-bottom: .2rem;
        height: 56px;
        border-radius: 0.16rem;
        background: url("../../assets/images/singBg.png") no-repeat;
        background-size: 100% 100%;


        &:last-child {
          margin-bottom: 0;
        }

        input {
          width: 100%;
          background: none;
          height: 100%;
          border: 0;

          &::placeholder {
            font-size: .26rem;
          }
        }
      }

      .set_area {
        margin-left: .14rem;
        font-size: .26rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.50);

        img {
          vertical-align: middle;
        }
      }

      .b {
        margin-left: .14rem;

        button, img {
          height: 100%;
          font-size: .26rem;
          font-weight: 400;
          color: #ffffff;
        }

        button {
          padding: 0 .3rem;
          border-radius: 0;
          background: none;
          color: #ffff00;
          border: 0;
        }

        span {
          color: var(--COcolor2);
        }
      }

      .str {
        right: .3rem;
        top: 0;
        height: .8rem;
        line-height: .8rem;

        img {
          vertical-align: middle;
          height: .28rem;
        }
      }
    }
  }

  .n {
    margin-bottom: .16rem;
    font-size: .26rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.90);
  }
}

.bot {
  padding-top: .3rem;
}

.doc {
  line-height: 1.4;
  margin-top: .05rem;
  color: var(--COcolor1);
  padding-left: 20px;
}

.btn {  
  border-radius: 0.2rem;
  background: linear-gradient(90.25deg, #43EA80 0.21%, #38F8D4 99.79%);
  color: #0E4E35;
}
</style>
